"use client";

import "@xyflow/react/dist/style.css";
import { Button } from "antd";
import { VscError } from "react-icons/vsc";
import { Background, ReactFlow } from "@xyflow/react";
import type { Edge, Node } from "@xyflow/react";

interface FLowPropType {
  data: dataType;
  onCancel: () => void;
}

export interface dataType {
  nodes: Node[];
  edges: Edge[];
  docid: string;
}

export default function FLow(props: FLowPropType) {
  return (
    <>
      <div style={{ textAlign: "right" }}>
        <Button
          type="primary"
          danger
          shape="circle"
          onClick={() => props.onCancel()}
          icon={<VscError></VscError>}
        ></Button>
      </div>
      <div
        style={{
          height: "550px",
          width: "80%",
          borderRadius: "10px",
          border: "1px solid #4d358b",
          background: "gray",
          margin: "10px auto",
        }}
      >
        <ReactFlow
          nodes={props.data.nodes}
          edges={props.data.edges}
        >
          <Background />
        </ReactFlow>
      </div>
    </>
  );
}
